<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/css/index.css">
    <script src="./assets/vendors/jquery/jquery.min.js"></script>
    <script src="./assets/vendors/bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="ogMs_bg">
        <div class="bg_mask"></div>
        <!-- 顶部 -->
        <div class="container ogMs_top">
            <div class="row">
                <div class="col-md-6 col-sm-6 hidden-xs">
                    <img src="./assets/img/og_Ms_logo.png" alt="">
                </div>
                <div class="col-md-6 col-sm-6 hidden-xs ogMs_search">
                    <form action="">
                        <input type="text" placeholder="Search">
                    </form>
                </div>
            </div>
        </div>

        <!-- 导航 -->
        <div class="container ogMs_nav" style="z-index: initial">
            <nav class="navbar navbar-default ogMs_navbar">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button id="list_btn" type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand visible-xs" href="#"><img src="./assets/img/og_Ms_logo.png" alt=""></a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="z-index: initial">
                        <div class="visible-xs ogMs_search">
                            <form action="">
                                <input type="text" placeholder="Search">
                            </form>
                        </div>
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="javascript:;">Home <span class="sr-only">(current)</span></a>
                            </li>
                            <li><a href="javascript:;">About Us</a></li>
                            <li><a href="javascript:;">Portfolio</a></li>
                            <li><a href="javascript:;">Solutions</a></li>
                            <li><a href="javascript:;">Case Studies</a></li>
                            <li><a href="javascript:;">Get a Quote</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>

        <!-- banner -->
        <div id="carousel-example-generic" class="container carousel slide ogMs_banner" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active hidden-xs"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1" class="hidden-xs"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2" class="hidden-xs"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3" class="hidden-xs"></li>
            </ol>

            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="./assets/img/ogMs_banner.jpg" alt="1">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="./assets/img/ogMs_banner.jpg" alt="2">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="./assets/img/ogMs_banner.jpg" alt="3">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="./assets/img/ogMs_banner.jpg" alt="4">
                    <div class="carousel-caption">
                    </div>
                </div>
            </div>

            <a class="left carousel-control hidden-xs" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control hidden-xs" href="#carousel-example-generic" role="button"
                data-slide="next">
                <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

        <!-- 内容区 -->
        <div class="container ogMs_content">
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12 con_left w_370 f_left ">
                    <div class="c_bg">
                        <h3>Welecome to the Orang Monster</h3>
                        <h4>Cras et est ac orci convallis lacinia ut vitae</h4>
                        </br>
                        <p>Class aptent taciti sociosqu ad litora torquent per conubia
                            nostra,per inceptos himenaeos.Phasellus feugiat,lacus sed
                            adipiscing venenatis, <span>est odio pharetra mi,</span> eu molestie orci
                            urma id lacus.Pellentesque sollicitudin pulvinar est quis
                            aliquam.
                            </br>
                            </br>
                            Cras ac tellus justo,et tincidunt nibh.Pellentesque habitant
                            morbi tristique senectus et netus et malesuada fames ac
                            turpis egestas.<span>Morbi porta vulputate</span> lorem,quis dignissim
                            eros feugiat sit amet! Donec suscipit porititor leo vel iaculis.
                            </br>
                            </br>
                            Class aptent taciti sociosqu ad litora torquent per conubia
                            nostra,per inceptos himenaeos.Phasellus feugiat,lacus sed
                            adipiscing venenatis,est odio pharetra mi,eu molestie orci
                            urma id lacus.Pellentesque sollicitudin pulvinar est quis
                            aliquam.
                            </br>
                            </br>
                        </p>
                        <input type="button" value="Click Me" class="btn btn-primary">
                    </div>

                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 con_between w_380 f_left ">
                    <div class="c_bg">
                        <img src="./assets/img/ogMs_feat1.png" alt="">
                        <img src="./assets/img/ogMs_feat2.png" alt="">
                    </div>
                </div>
                <div class="col-md-4 col-sm-12 col-xs-12 con_right w_370 f_left">
                    <div class="c_bg">
                        <h4 class="color">Pellentesque habitant morbi</h4>
                        <br>
                        <p>tristique senectus et netus et malesuada fames ac turpis
                            egestas. Duis arcu enim, ultrices nec molis commodo,
                            <span>loborts quis neque.</span>Duis consequat diam eu ipsum volutpat
                            pulvinar.Quisque venenatis laoreet ligula vel ultrices.
                            <br>
                            <br>
                            Aliquam quis eros elit,eget facilisis elit.Quisque sodales,
                            nunc sed sodales blandit,metus justo gravida eros,at
                            facilisis <span>lorem mi ac augue.</span>Nullam sed turpis orci,at
                            dapibus metus.Suspendisse sed venenatis ipsum.Aliquam
                            erat volutpat.
                        </p>
                        <br>
                        <h4 class="color">onec ornare volutpat molestie.</h4>
                        <br>
                        <p>
                            Etiam tortor uma,ultricies id ultrcices id;faucibus sit amet
                            urna.Mauris accumsan,risus sit amet rhoncus euismod,
                            velit enim <span>ullamcorper odio</span>,feugiat semper erat sapien sit
                            amet justo.Fusce euismod dictum pretium.Sed venenatis
                            felis eu ante feugiat pretium?
                            <br>
                            <br>
                            Aliquam quis eros elit,eget facilisis elit.Quisque sodales,
                            nunc sed sodales blandit,metus justo gravida eros,at
                            facilisis lorem mi ac augue.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部 -->



        <div class="ogMs_footer">
            <div class="shadow"></div>
            <div class="container">
                <div class="left">
                    <div class="footer_links">
                        <dl>
                            <dt>About Us</dt>
                            <dd>dui vel eros vestibulum</dd>
                            <dd>Mauris lectus erat,iaculis</dd>
                        </dl>
                        <dl>
                            <dt>Portfolio</dt>
                            <dd>dui vel eros vestibulum</dd>
                            <dd>Mauris lectus erat,iaculis</dd>
                            <dd>Mauris lectus erat,iaculis</dd>
                        </dl>
                        <dl>
                            <dt>Solutions</dt>
                            <dd>dui vel eros vestibulum</dd>
                            <dd>Mauris lectus erat,iaculis</dd>
                            <dd>Mauris lectus erat,iaculis</dd>
                        </dl>
                        <dl>
                            <dt>Case Studies</dt>
                            <dd>dui vel eros vestibulum</dd>
                            <dd>Mauris lectus erat,iaculis</dd>
                        </dl>
                    </div>
                    <div class="footer_copyright visible-lg">
                            <p>Copyright 2011 &copy; crangemonster.com.au,Orange Monster Development Pty Ltd All Rights
                                Reserved</p>
                            <a href="#">Contact Us</a>丨<a href="#">Privscy Policy</a>丨<a href="#">Get a Quote</a>
                    </div>
                </div>
                <div class="right">
                    <div class="dialogue_box">
                        <p>
                            <span>@OrangMonster</span> Praesent non odio
                            vitae sapien congue feugiat a id elit?
                            In hac habitasse platea dictumst <br>
                            <em>11 minutes ago</em> <br>
                            <span>Follow Us on Twitter</span>
                        </p>
                        <img src="./assets/img/icon_1.png" alt="">
                    </div>

                    <!-- <img src="./assets/img/dialogue_box.png" alt="" class="pic_box"> -->
                    <img src="./assets/img/ogMs_eye.png" alt="" class="pic_eye">
                </div>
                <div class="footer_copyright hidden-lg">
                    <p>Copyright 2011 &copy; crangemonster.com.au,Orange Monster Development Pty Ltd All Rights
                        Reserved</p>
                    <a href="#">Contact Us</a>丨<a href="#">Privscy Policy</a>丨<a href="#">Get a Quote</a>
                </div>
            </div>
        </div>


        <!-- js代码 -->
        <script>
            $(function () {

                // 实现手机端轮播图触摸滑动效果

                var $carousels = $('.carousel');
                var startX, endX;
                var offset = 50;
                $carousels.on('touchstart', function (e) {
                    startX = e.originalEvent.touches[0].clientX;
                });
                $carousels.on('touchmove', function (e) {
                    endX = e.originalEvent.touches[0].clientX;
                });
                $carousels.on('touchend', function (e) {
                    var distance = Math.abs(startX - endX);
                    if (distance > offset) {
                        $(this).carousel(startX > endX ? 'next' : 'prev');
                    }
                })

                // 点击菜单下拉列表，背景遮罩

                $('#list_btn').on('click', function () {
                    $('.bg_mask').toggleClass('d_block');
                    $('.container-fluid').toggleClass('p_fixed');
                })
            });



        </script>
    </div>
</body>

</html>